<template>
    <el-container>
        <el-header>
            <el-form :inline="true" :model="formInline" class="demo-form-inline search-form">
                <el-form-item label="编号">
                    <el-input v-model="formInline.id" placeholder="编号"></el-input>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="formInline.title" placeholder="标题"></el-input>
                </el-form-item>
                <el-form-item label="负责人">
                    <el-input v-model="formInline.user" placeholder="负责人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-header>
       <el-main>
           <el-table
                   class="user-list"
                   :cell-style="cellStyle"
                   ref="multipleTable"
                   :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                   :header-cell-style="rowClass"
                   border
                   style="width: 100%">
               <el-table-column
                       prop="Id"
                       label="编号"
                       width="150">
               </el-table-column>
               <el-table-column
                       prop="title"
                       label="标题"
                       width="280">
               </el-table-column>
               <el-table-column
                       prop="ponderance"
                       label="缓急程度"
                       width="120">
               </el-table-column>
               <el-table-column
                       prop="charge"
                       label="维修负责人"
                       width="120">
               </el-table-column>
               <el-table-column
                       prop="status"
                       label="状态"
                       width="120">
               </el-table-column>
               <el-table-column
                       prop="date"
                       label="申请日期"
                       width="150">
               </el-table-column>
               <el-table-column
                       label="操作"
                       width="120">
                   <template slot-scope="scope">
                       <el-button
                               @click.native.prevent="deleteRow(scope.$index, tableData)"
                               type="text"
                               size="small">
                           移除
                       </el-button>
                   </template>
               </el-table-column>
           </el-table>

           <!--分页-->
           <el-pagination
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="50"
                   layout="total, sizes, prev, pager, next, jumper"
                   class="user-list-page"
                   :total="total">
           </el-pagination>

       </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "maintain",
        data(){
            return{
                input:'',
                formInline: {
                    user: '',
                    id: '' ,
                    title:''
                },
                tableData: [
                    {
                        Id:'170',
                        title:'电脑软件安装',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2019-6-20'
                    },
                    {
                        Id:'171',
                        title:'电脑软件安装',
                        ponderance:'普通',
                        charge:'李四',
                        status:'待处理',
                        date:'2019-7-28'
                    },
                    {
                        Id:'172',
                        title:'电脑软件安装',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2019-9-15'
                    },
                    {
                        Id:'173',
                        title:'电脑软件安装',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2019-5-16'
                    },
                    {
                        Id:'174',
                        title:'电脑软件安装',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2019-8-18'
                    },
                    {
                        Id:'175',
                        title:'电脑软件安装',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2020-2-4'
                    },
                    {
                        Id:'176',
                        title:'饮水机损坏',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2020-8-20'
                    },
                    {
                        Id:'177',
                        title:'车辆损坏',
                        ponderance:'普通',
                        charge:'张三',
                        status:'待处理',
                        date:'2020-6-16'
                    },
                ],
                // 分页
                currentPage: 1, //当前页
                pageSize:5, //每页显示
                total:''
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            //分页功能
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.currentPage = val
            },
            //表格数据居中显示
            cellStyle({row,column,rowIndex,columnIndex}){
                return "text-align:center"
            },
            rowClass({row,rowIndex}){
                return "text-align:center"
            },
        },
        created() {
            this.total = this.tableData.length
        }
    }
</script>

<style scoped>
    .search-form {
        border: 1px solid #e4e4e4;
        padding: 20px 20px 0;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list {
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
    }
    .user-list-page{
        margin-top: 20px;
        padding: 20px;
        border: 1px solid #e4e4e4;
        box-shadow: 0 0 3px 1px #e4e4e4;
        border-radius: 3px;
        text-align: center;
    }
</style>